<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{$title}</title>
    <!-- <meta name="description" content="{$share_introduction}"> -->
    <script src="/natal/js/rem.js"></script>
    <link rel="stylesheet" href="/static/valentine/2020/css/index2020.css?v=9">
    <!--        <script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>-->
    <script src="/static/valentine/2020/js/jmlink.min.js"></script>
</head>
<body>
<div class="container">
    <div class="shadow"></div>
    <div class="header">
        <img src="/static/valentine/2020/img/七夕头图.png" alt="">
    </div>
    <div class="body">
        <div class="rank-list">
            <div class="list-head">
                <ul class="list-ul">
                    <li class="list-li">
                        <div class="rank-num"></div>
                        <div class="rank-user">排名</div>
                        <div class="rank-score">合盘分数</div>
                    </li>
                </ul>
            </div>
            <div class="list-body show-area">
                <ul class="list-ul">
                    <li class="list-li">
                        <div class="rank-num">1</div>
                        <div class="rank-user">
                            <div class="user-avatar">
                                <div class="img1"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                                <div class="img2"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                            </div>
                            <div class="user-nickname">小准准</div>
                        </div>
                        <div class="rank-score">
                            <div class="score-num">488</div>
                            <div class="score-flag">（自己）</div>
                            <div class="score-time">8-22 20:54:36</div>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="rank-num">2</div>
                        <div class="rank-user">
                            <div class="user-avatar">
                                <div class="img1"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                                <div class="img2"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                            </div>
                            <div class="user-nickname">五只猪猪...</div>
                        </div>
                        <div class="rank-score">
                            <div class="score-num">468</div>
                            <div class="score-flag"></div>
                            <div class="score-time">8-22 20:54:36</div>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="rank-num">3</div>
                        <div class="rank-user">
                            <div class="user-avatar">
                                <div class="img1"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                                <div class="img2"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                            </div>
                            <div class="user-nickname">五只猪猪...</div>
                        </div>
                        <div class="rank-score">
                            <div class="score-num">388</div>
                            <div class="score-flag"></div>
                            <div class="score-time">8-22 20:54:36</div>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="rank-num">4</div>
                        <div class="rank-user">
                            <div class="user-avatar">
                                <div class="img1"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                                <div class="img2"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                            </div>
                            <div class="user-nickname">五只猪猪...</div>
                        </div>
                        <div class="rank-score">
                            <div class="score-num">368</div>
                            <div class="score-flag"></div>
                            <div class="score-time">8-22 20:54:36</div>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="rank-num">5</div>
                        <div class="rank-user">
                            <div class="user-avatar">
                                <div class="img1"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                                <div class="img2"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                            </div>
                            <div class="user-nickname">五只猪猪...</div>
                        </div>
                        <div class="rank-score">
                            <div class="score-num">366</div>
                            <div class="score-flag"></div>
                            <div class="score-time">8-22 20:54:36</div>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="rank-num">6</div>
                        <div class="rank-user">
                            <div class="user-avatar">
                                <div class="img1"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                                <div class="img2"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                            </div>
                            <div class="user-nickname">五只猪猪...</div>
                        </div>
                        <div class="rank-score">
                            <div class="score-num">366</div>
                            <div class="score-flag"></div>
                            <div class="score-time">8-22 20:54:36</div>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="rank-num">7</div>
                        <div class="rank-user">
                            <div class="user-avatar">
                                <div class="img1"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                                <div class="img2"><img src="/static/valentine/2020/img/默认头像.png" alt=""></div>
                            </div>
                            <div class="user-nickname">五只猪猪...</div>
                        </div>
                        <div class="rank-score">
                            <div class="score-num">306</div>
                            <div class="score-flag"></div>
                            <div class="score-time">8-22 20:55:36</div>
                        </div>
                    </li>
                </ul>
                <div class="shadow-tips">
                    <div class="tips-text">滑动查看更多排名</div>
                    <img class="tips-gif" src="/static/valentine/2020/img/滑动手势动图3.gif" alt="">
                </div>
            </div>
            <div class="list-foot">
                <ul class="list-ul">
                    {if $rn === true}
                    <li class="list-li">
                        <!--用户当前排名-->
                        <div class="rank-num">{if empty($userinfo.userHistory)}暂无排名{else}{$userinfo.userRank}{/if}</div>
                        <div class="rank-user">
                            <div class="user-avatar">
                                <div class="img1">
                                    {if !empty($userinfo.userHistory) && $userinfo.userHistory[0]['avatar1']}
                                    <img src="{if strpos($userinfo.userHistory[0]['avatar1'],'http')=== false}{$oss}/{/if}{$userinfo.userHistory[0]['avatar1']}"
                                         alt="">
                                    {else}
                                    <img src="/static/valentine/2020/img/默认头像.png" alt="">
                                    {/if}
                                </div>
                                <div class="img2">
                                    {if !empty($userinfo.userHistory) && $userinfo.userHistory[0]['avatar2']}
                                    <img src="{if strpos($userinfo.userHistory[0]['avatar2'],'http')=== false}{$oss}/{/if}{$userinfo.userHistory[0]['avatar2']}"
                                         alt="">
                                    {else}
                                    <img src="/static/valentine/2020/img/默认头像.png" alt="">
                                    {/if}
                                </div>
                            </div>
                            <div class="user-nickname">{$userinfo.nickname}</div>
                        </div>
                        <div class="rank-score">
                            <div class="score-num">{if !empty($userinfo.userHistory)}{$userinfo.userHistory[0]['score']}{else}暂无分数{/if}
                            </div>
                            <div class="score-flag">（自己）</div>
                        </div>
                    </li>
                    {/if}
                </ul>
            </div>
        </div>
        <div class="rank-extra">
            <div class="reload-btn fr">
                <img class="reload-icon" src="/static/valentine/2020/img/reload.png">
                刷新排名
            </div>
        </div>
        {if $rn !==true}
        <a id="invite" class="invite"></a>
        {else}
        <a class="invite" onclick="showShareChoice();"></a>
        {/if}
        {if $rn === true && !empty($userinfo.userHistory)}
        <div class="history">
            <div class="title">
                <span class="flag1"></span>
                合盘记录
            </div>
            <ul class="history-list">
                {foreach $userinfo.userHistory as $i => $l}
                <li class="history-list-item">
                    <a href="{:url('get_with_score')}?id={$l.id}&token={$userinfo.token_weixin}"
                       style="display:block;overflow: hidden;">
                        <div class="record">
                            {if $l.avatar1}
                            <img class="avatar" src="{if strpos($l.avatar1,'http')=== false}{$oss}/{/if}{$l.avatar1}" alt="">
                            {else}
                            <img class="avatar" src="/static/valentine/2020/img/默认头像.png" alt="">
                            {/if}
                            <div class="nickname">{$l.nickname1}</div>
                        </div>
                        <div class="record">
                            {if $l.avatar2}
                            <img class="avatar" src="{if strpos($l.avatar2,'http')=== false}{$oss}/{/if}{$l.avatar2}" alt="">
                            {else}
                            <img class="avatar" src="/static/valentine/2020/img/默认头像.png" alt="">
                            {/if}
                            <div class="nickname">{$l.nickname2}</div>
                        </div>
                        <div class="sp-line"></div>
                        <div class="score-and-text">
                            <div class="text">{$l.relation}</div>
                            <div class="score">/ {$l.score}</div>
                        </div>
                    </a>
                </li>
                {/foreach}
                <li class="history-list-item show-more">
                    <a href="{:url('getUserHistoryList')}?token={$userinfo.token_weixin}" class="show-more-btn">查看更多合盘记录</a>
                </li>
            </ul>
        </div>
        {/if}
    </div>
    <div class="footer">
        <div class="title">
            <span class="flag1"></span>
            快来查看你的恋爱攻略！
        </div>
        <ul class="goods-list">
            <li class="list-item">
                <!--在APP内部访问时，使用m站地址跳转本地报告页面，否则跳转的wap站-->
                <a href="{if $rn === true}https://m.goddessxzns.com/report_details?gid=39&need_auth=1{else}https://wap.goddessxzns.com/zhunle_wap_astro/home?page=%2fpay%3ftype%3dnatal_report%26gid%3d39&channel=75{/if}"
                   target="_blank">
                    <img class="goods-bg" src="/static/valentine/2020/img/loving-report.png" alt="">
                    <span class="goods-btn">前往查看</span>
                    <div class="goods-info">
                        <span class="num-icon iconfont iconbuy"></span>
                        <span>{$love_report_sale_num}</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    {if $rn !== true}
    <div class="global-location">
        <a href="https://at.umtrack.com/onelink/KD0jei" class="location">
            <span class="loc-btn">打开APP</span>
            <span class="close"></span>
        </a>
    </div>
    {/if}
    <!--活动规则-->
    <div class="pop-box">
        <div class="pop-shadow"></div>
        <div class="rules">
            <div class="box-title"></div>
            <div class="box-content">
                <p>1、在8月22-8月25日期间，在本页参与合盘活动的用户，按照合盘分数高低将选出排行榜前三位小行星送出专属恋爱报告奖励。</p>
                <p>2、合盘分数相同的情况下，会按照合盘时间先后顺序进行排名，如：用户A在8.22 5:02合盘出结果542分，用户B在8.22 5:40分合盘出结果542分，那么用户A的排名将排在用户B的前面，其他同理。</p>
                <p>3、当您参与本次合盘活动，代表您同意将您的合盘内容及分数授权给准了APP使用并公开给所有人。</p>
                <p>4、合盘分数必须在本页面参与活动进行合盘而产生，在APP中“合盘”功能产生的合盘分数不计入排名，请您悉知。</p>
                <p>5、本次活动解释权归北京准了科技所有。</p>
            </div>
            <div class="box-close"></div>
        </div>
    </div>
    <div class="fixed-button">
        <div class="rules-btn"></div>
    </div>
    <!--邀请好友方式-->
    <div class="share-box" style="display: none;">
        <div class="share-box-shadow"></div>
        <div class="share-choice">
            <div class="title">分享到</div>
            <div class="share-list">
                <div class="list-item"
                     onclick="commonJsToNativeShare('{$share_title}', '{$share_des}', '{$domain}/web/valentine/add2020?token={$userinfo.token_weixin}', 0);">
                    <span class="weixin"></span>微信
                </div>
                <div class="list-item"
                     onclick="commonJsToNativeShare('{$share_title}','{$share_des}','{$domain}/web/valentine/add2020?token={$userinfo.token_weixin}',1)">
                    <span class="weixin-timeline"></span>朋友圈
                </div>
                <div class="list-item"
                     onclick="commonJsToNativeShare('{$share_title}', '{$share_des}', '{$domain}/web/valentine/add2020?token={$userinfo.token_qq}', 3);">
                    <span class="qq"></span>QQ好友
                </div>
            </div>
        </div>

    </div>
</div>
<script src="/static/jquery-3.1.1.min.js"></script>
<script>
    var uid = "{$userinfo.id}",
        app_type = '{$app_type}',
        version = '{$version}';

    document.body.addEventListener('touchstart', function () {
    });

    // 第一次打开页面时，提示滑动查看更多排行榜内容
    var showTips = localStorage.getItem("showTips");
    if (showTips === '1') {
        $('.shadow').hide();
        $('.shadow-tips').hide()
    } else {
        setTimeout(function () {
            localStorage.setItem("showTips", '1');
            $('.shadow').hide();
            $('.shadow-tips').hide()
        }, 800)
    }
    // 显示活动规则
    $('.rules-btn').click(function () {
        $('.pop-box').show();
    })

    // 活动规则关闭显示
    $('.pop-box .pop-shadow,.pop-box .box-close').click(function () {
        $('.pop-box').hide();
    })

    // 邀请好友选择界面关闭
    $('.share-box-shadow').click(function () {
        $('.share-box').hide();
    })

    // 外部打开活动，底部《打开APP》功能关闭按钮
    $('.global-location .close').click(function () {
        $(this).parent().parent().hide();
        return false;
    })

    // 获取排行榜列表
    getRankingList();

    // 格式化时间戳数据
    function formatlistdate(time) {
        var date = new Date(time * 1000);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        var hour = date.getHours().toString();
        var minutes = date.getMinutes().toString();
        var seconds = date.getSeconds().toString();
        if (hour < 10) {
            hour = "0" + hour;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        return (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + " " + hour + ":" + minutes + ":" + seconds;
    }

    // 异步请求排行榜数据
    function getRankingList() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/web/valentine/getRankList",
            success: function (result) {
                // document.getElementById('shadow').style.display = 'none';
                // document.getElementById('loading').style.display = 'none';
                if (result.code === 200) {
                    var htmlStr = '';
                    $.each(result.data, function (k, v) {
                        var isself = v.uid == uid;
                        var avatar1 = v.avatar1 ? ((v.avatar1.indexOf('http') !== -1 ? '' : '{$oss}/') + v.avatar1) : '/static/valentine/2020/img/默认头像.png';
                        var avatar2 = v.avatar2 ? ((v.avatar2.indexOf('http') !== -1 ? '' : '{$oss}/') + v.avatar2) : '/static/valentine/2020/img/默认头像.png';

                        htmlStr += '<li class="list-li">' +
                            '   <div class="rank-num">' + (k + 1) + '</div>' +
                            '   <div class="rank-user">' +
                            '       <div class="user-avatar">' +
                            '           <div class="img1"><img src="' + avatar1 + '" alt=""></div>' +
                            '           <div class="img2"><img src="' + avatar2 + '" alt=""></div>' +
                            '       </div>' +
                            '       <div class="user-nickname">' + v.nickname1 + '</div>' +
                            '   </div>' +
                            '   <div class="rank-score">' +
                            '       <div class="score-num">' + v.score + '</div>' +
                            '       <div class="score-flag">' + (isself ? '（自己）' : '') + '</div>' +
                            '       <div class="score-time">' + formatlistdate(v.create_time) + '</div>' +
                            '   </div>' +
                            '</li>';
                    })
                    $('.list-body .list-ul').html(htmlStr);

                } else {
                    alert(result.msg);
                }
                $('.reload-btn').find('.reload-icon').removeClass("reloading");
            },
            error: function (result) {
                // document.getElementById('shadow').style.display = 'none';
                // document.getElementById('loading').style.display = 'none';
                alert(result.msg);
                $('.reload-btn').find('.reload-icon').removeClass("reloading");
            }
        });
        return false;
    }

    // 刷新排行榜
    $('.reload-btn').click(function () {
        var reloadIcon = $(this).find('.reload-icon');
        if (!reloadIcon.hasClass("reloading")) {
            reloadIcon.addClass("reloading");
            // 延时1.5秒进行刷新排行榜
            setTimeout(function () {
                getRankingList();
            }, 1500)
        }
        return false;
    })

    // 显示分享选项
    function showShareChoice() {
        $('.share-box').show();
    }

    /**
     * commonJsToNativeShare(title,desc,**url,platform[0：微信；1：微信朋友圈；2：微博；3：qq；4：qq空间]);【注意：banner 跳转的webview 和 服务消息里跳转的webview  要实现的js调用本地分享的方法】
     * @param title
     * @param desc
     * @param url
     * @param platform
     */
    function commonJsToNativeShare(title, desc, url, platform, umeng_event_name, umeng_event_label) {

        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNativeShare.postMessage({
                    'title': title,
                    'desc': desc,
                    'url': url,
                    'platform': platform,
                    'umeng_event_name': umeng_event_name,
                    'umeng_event_label': umeng_event_label
                });
                break;
            case 'android':
                console.log('android')
                androidwebview.commonJsToNativeShare(title, desc, url, platform, umeng_event_name, umeng_event_label)
                break;
            default:
                console.log('not ios or android')
        }
    }

    new JMLink({
        jmlink: 'https://a0ue2y.jmlk.co/AA63',// 短链地址
        button: document.querySelector('#invite'),
        plhparams: {
            target: 'link',
            link: "{$domain}/web/valentine/index2020"
        }
    });
</script>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279195343&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</body>
</html>
